<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>后台代码生成</title>
<link rel="stylesheet" href="${ctxPath}/layui/css/layui.css">
<script src="${ctxPath}/libs/jquery.min.js"></script>
<script src="${ctxPath}/libs/jquery.slimscroll.min.js"></script>
<script src="${ctxPath}/libs/pace.min.js"></script>
<script src="${ctxPath}/layui/layui.js"></script>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
body {
	margin-top: 30px;
}
</style>
</head>
<body>
	<div class="layui-container">
		<div class="layui-btn-group">
			<button class="layui-btn ext-toolbar" id="js">预览JS</button>
			<button class="layui-btn ext-toolbar" id="java">预览Java</button>
			<button class="layui-btn ext-toolbar" id="sql">预览SQL</button>
			<button class="layui-btn ext-toolbar" id="html">预览HTML</button>
			<button class="layui-btn ext-toolbar" id="gen">立即生成</button>
			<button class="layui-btn ext-toolbar" id="cancel">取消</button>
		</div>
		<form class="layui-form" id="updateForm">
			<fieldset class="layui-elem-field layui-field-title"
				style="margin-top: 30px;">
				<legend>基本信息</legend>
			</fieldset>
			
			<div class="layui-row">
				<div class="layui-form-item">
					<label class="layui-form-label">项目路径</label>
				    <div class="layui-input-block">
				      	<input type="text" id="workSpace" name="workSpace" readonly value="${gen.workSpace}" class="layui-input">
				    </div>
				</div>
			</div>
			
			<div class="layui-row">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">表名</label>
						<div class="layui-input-inline">
							<input type="text" name="entity.tableName" readonly value="${entity.tableName}" class="layui-input">
						</div>
					</div>
		
					<div class="layui-inline">
						<label class="layui-form-label">类名</label>
						<div class="layui-input-inline">
							<input type="text" name="entity.name" value="${entity.name}" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">系统包名</label>
						<div class="layui-input-inline">
							<input type="text" name="basePackage" value="${gen.basePackage}" class="layui-input">
						</div>
					</div>
				</div>
			</div>
			<div class="layui-row">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">业务名称</label>
						<div class="layui-input-inline">
							<input type="text" name="entity.displayName" value="${entity.name}" class="layui-input">
						</div>
					</div>
		
					<div class="layui-inline">
						<label class="layui-form-label">变量名</label>
						<div class="layui-input-inline">
							<input type="text" name="entity.code" value="${entity.code}" class="layui-input">
						</div>
					</div>
				</div>
			</div>
			<div class="layui-row">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">urlBase</label>
						<div class="layui-input-inline">
							<input type="text" name="urlBase" value="sims" class="layui-input">
						</div>
					</div>
				
					<div class="layui-inline">
						<label class="layui-form-label">system</label>
						<div class="layui-input-inline">
							<input type="text" name="entity.system" value="sims" class="layui-input">
						</div>
					</div>
				</div>
			</div>
			
			<fieldset class="layui-elem-field layui-field-title"
				style="margin-top: 30px;">
				<legend>主键信息</legend>
			</fieldset>
			
			<div class="layui-row">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">字段名</label>
						<div class="layui-input-inline">
							<input type="text" name="entity.idAttribute.name" value="${entity.idAttribute.name}" class="layui-input">
						</div>
					</div>
		
		
					<div class="layui-inline">
						<label class="layui-form-label">列名</label>
						<div class="layui-input-inline">
							<input type="text" name="entity.idAttribute.colName" readonly value="${entity.idAttribute.colName}" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">javaType</label>
						<div class="layui-input-inline">
							<input type="text" name="entity.idAttribute.javaType" value="${entity.idAttribute.javaType}" class="layui-input">
						</div>
					</div>
				</div>
			</div>
			
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>字段信息（重要）</legend>
			</fieldset>
			
			<table class="layui-table">
				<colgroup>
					<col width="200">
					<col width="250">
					<col width="250">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>名称</th>
						<th>显示名</th>
						<th>javaType</th>
						<th>查询</th>
						<th>字段校验(可选)</th>
					</tr>
				</thead>
				<tbody>
					<!--# 
					var attrs = entity.list;
					for(attr in attrs){
					-->
					<tr>
						<td>
						<input type="text" name="entity.list[${attrLP.index-1}].name" readonly value="${attr.name}" class="layui-input" />
						</td>
						<td>
						<input type="text" name="entity.list[${attrLP.index-1}].displayName" value="${attr.displayName}" class="layui-input">
						</td>
						<td>
						<input type="text" name="entity.list[${attrLP.index-1}].javaType" value="${attr.javaType}" class="layui-input">
						</td>
						<td>
						<input type="checkbox" name="entity.list[${attrLP.index-1}].showInQuery" lay-skin="primary" value="true" title="作为搜索">
						</td>
						<td>
						<div class="layui-btn-container verifyGroup" data-index="${attrLP.index-1}">
							<div class="layui-btn layui-btn-xs addVerify"><i class="layui-icon">&#xe654;</i></div>
						</div>
						</td>
					</tr>
					<!--# }  -->
				</tbody>
			</table>
			
		</form>
	</div>
	<script>
		//JavaScript代码区域
		layui.use('form',function() {
			var form = layui.form;
			$(".addVerify").click(function(){
				var _this = $(this),
				verifyGroup = _this.parent('.verifyGroup');
            	layer.open({
            		title: '添加校验类型',
            		content: '<div class="layui-form">'+
           		  		   		'<div class="layui-form-item">'+
									'<input type="checkbox" class="verify" title="必填" value="required"/>'+
									'<input type="checkbox" class="verify" title="邮箱"value="email" />'+
									'<input type="checkbox" class="verify" title="手机" value="phone"/>'+
	            				'</div>'+
	            				'<div class="layui-form-item">'+
						        	'<input type="checkbox" class="verify" title="数字"value="number" />'+
						            '<input type="checkbox" class="verify" title="日期" value="date"/>'+
						            '<input type="checkbox" class="verify" title="网址" value="url"/>'+
						        '</div>'+
						        '<div class="layui-form-item">'+
						        	'<input type="checkbox" class="verify" title="身份证"value="identity" />'+
						         '</div>'+
           					'</div>',
        			success: function(layero, index){
       				  	//初始化赋值
       				   	var inputs = verifyGroup.find('input');
       				   	var verifys = $('.verify');
       				   	for (var i = 0; i < inputs.length; i++) {
       				    	for (var j = 0;j< verifys.length;j++) {
								if(inputs[i].value == verifys[j].value){
									$(verifys[j]).attr("checked",true);
								}
							}
						}
       				   	form.render();
        			},
        			yes: function(index, layero){
       				    var verifys = $('.verify:checked');
       				    //清空并重新赋值
       				    verifyGroup.find('.verifybtn').remove();
       				    for (var i = 0; i < verifys.length; i++) {
       				    	var name = 'entity.list[' + verifyGroup.data('index')+'].verifyList'+'['+i+'].name';
       				    	var btn =  	'<button class="layui-btn layui-btn-xs verifybtn" type="button" >'+$(verifys[i]).attr('title')+
       				    					'<input type="text" name="'+name +'"  value="'+$(verifys[i]).val()+'" hidden>'+
       				    				'</button>'
       				    	verifyGroup.append(btn);
						}
       				    layer.close(index);
        			}
            	});
        	});
			
			$(document).on('click','#js',function(){
				var form = $("#updateForm");
				var formPara = form.serialize();
				$.post('${ctxPath}/code/gen/js',formPara,function(res){
					openCode(res.content);
				});
			});
			
			$(document).on('click','#html',function(){
				var form = $("#updateForm");
				var formPara = form.serialize();
				$.post('${ctxPath}/code/gen/html',formPara,function(res){
					openCode(res.content);
				});
			});
			
			$(document).on('click','#java',function(){
				var form = $("#updateForm");
				var formPara = form.serialize();
				$.post('${ctxPath}/code/gen/java',formPara,function(res){
					openCode(res.content);
				});
			});
			
			$(document).on('click','#sql',function(){
				var form = $("#updateForm");
				var formPara = form.serialize();
				$.post('${ctxPath}/code/gen/sql',formPara,function(res){
					openCode(res.content);
				});
			});
			
			$(document).on('click','#gen',function(){
				var form = $("#updateForm");
				var path = $("#workSpace").val();
				layer.prompt({title: '代码保存路径?', formType: 0,value:path}, function(value, index,elem){
					layer.close(index);
					$("#workSpace").val(value);
					var formPara = form.serialize();
					$.post('${ctxPath}/code/gen/gen',formPara,function(res){
						console.log(res)
					});
	    		});
			});
			
			$(document).on('click','#cancel',function(){
				var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
				parent.layer.close(index);
			});
			
			function openCode(data){
				var tab=[];
				for(var key in data){
					var title = key;
					var content = formatCode(key,data[key]);
					tab.push({"title":title,"content":content}); 
				}
				var index = layer.tab({
					  area: ['600px', '500px'],
					  tab:tab,
					  success: function(layero, index){
						  layui.use('code', function(){ //加载code模块
							  layui.code({
								  about: false
							  }); //引用code方法
						});
					  }
				});
				layer.full(index);
			}
			function formatCode( name,content){
				if(name.indexOf(".html")){
					content =  $('<div/>').text(content).html(); 
				}
				content = "<pre class='layui-code'>"+content+"<pre>";
				return content;
			}
		});
	</script>
</body>
</html>